<template>
  <div class="theme">
    <heads :types="1" class="headss"></heads>
    <div class="conlist" >
      <!-- 分类 -->
      <div class="typeBox">
        <!-- <div class="typeItem actives">
          <div>男生</div>
        </div> -->
        <div :class="['typeItem',(index == activeIndex) ? 'actives' : '']" v-for="(item,index) in list" :key="index" @click="clickType(index)">
          <div>{{item.name}}</div>
        </div>
      </div>
      <div class="listBox" v-rollY>
        <div class="items" v-for="(item,index) in list[activeIndex].bizProdAiModels" :key="index" @click="clickItem(item)">
          <div class="imgBox">
            <img :src="item.imgUrl" alt="">
          </div>
          <div class="nameBox">{{item.name}}</div>
          <div class="isHot" v-if="item.isTop == 1">
            <img src="../assets/img/hotImg.png" alt="">
          </div>
        </div>
      </div>
      <div class="xiahua">
        <span>向下滑动</span>
        <img src="../assets/img/xxgd.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import heads from '../components/heads.vue'
import {modelList} from '../server/api'
import { mapMutations } from 'vuex'
export default {
  components:{
      heads
  },
  data(){
    return {
      list:[
        {
          bizProdAiModels:[]
        }
      ],
      // 当前选中的类型
      activeIndex:0,
    }
  },
  methods:{
    ...mapMutations([
      'setCommonData',
    ]),
    // 点击每一个
    clickItem(data){
      let isClick = document.getElementsByClassName('listBox')[0].getAttribute('data-flag');
      if(isClick === 'true'){
        this.$router.push('/goodList?modelId='+data.id+'&title='+data.name)
      }
    },
    // 获取模型列表
    getmodelList(){
      let obj = {
        pageNum: 1,
        pageSize: 10,
        status:0
      }
      modelList(obj).then(res=>{
        this.list = res.data;
      }).catch(err=>{

      })
    },
    // 点击分类
    clickType(index){
      console.log(index)
      this.activeIndex = index;
    },
  },
  created(){
    
  },
  activated() {
    this.setCommonData({
      key:'paymentStatus',
      value:false
    });
    // console.log('组件被激活');
    // console.log(this.$router.history.prev)
    this.getmodelList();
  },
}
</script>

<style lang="less" scoped>
.theme{
  width: 100%;
  height: 1920px;
  background-image: url('../assets/img/bgImg.png');
  background-size: 100% 1920px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  .headss{
    flex: none;
  }
  .conlist{
    width: 100%;
    height: auto;
    // padding: 0 120px;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex: 1;
    .typeBox{
      flex: none;
      width: 167px;
      padding-top: 102px;
      .typeItem{
        width: 149px;
        height: 88px;
        // background-color: linear-gradient( #7875FC, #9996FF, #FFE1C5, #8784FF);
        background: linear-gradient(to right, rgba(193, 186, 246, 1),rgba(222, 209, 232, 1),rgba(193, 186, 246, 1));
        font-size: 40px;
        color: #FFFFFF;
        border-radius:0 64px 64px 0;
        box-shadow: 0px 0px 10px 0px #2A26BC4D;
        padding: 4px 4px 4px 0;
        box-sizing: border-box;
        cursor: pointer;
        margin-bottom: 44px;
        div{
          background: rgba(209, 203, 246, 1);
          border-radius:0 64px 64px 0;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .actives{
        background: linear-gradient(to right, rgba(153, 150, 255, 1),#FFE1C5,#8784FF);
        div{
          background: #7875FC;
        }
      }
    }
    .listBox{
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: flex-start;
      padding-top: 20px;
      margin-bottom: 150px;
      padding-right: 40px;
      .items{
        width: 340px;
        height: 440px;
        margin-top: 40px;
        cursor: pointer;
        background-image: url('../assets/img/cards.png');
        background-size: 100% 440px;
        background-repeat: no-repeat;
        position: relative;
        &:nth-child(-n+2){
          margin-top: 0;
        }
        .imgBox{
          width: 168px;
          height: 232px;
          border: 4px solid transparent;
          border-image: linear-gradient(180deg, #7875FC99, #FFCA9999) 1 1 round;
          // box-shadow: 8px 10px 10px 0px #03009233;
          box-sizing: border-box;
          margin: 0 auto;
          margin-top: 46px;
          img{
            width: 100%;
            height: 100%;
            object-fit:cover;
          }
        }
        .nameBox{
          width: 100%;
          font-size: 24px;
          color: #FFFFFF;
          text-align: center;
          margin-top: 10px;
        }
        .isHot{
          width: 124px;
          height: 58px;
          position: absolute;
          right: -40px;
          top: -8px;
          transform: rotate(20deg);
          img{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .xiahua{
      width: 127px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin-bottom: 300px;
      animation: floating 2s ease;
      span,i{
        font-size: 36px;
        color: rgba(120, 117, 252, 0.7);
      }
      span{
        writing-mode: vertical-rl; /* 文字从上到下，从右到左 */
        letter-spacing: 20px;
        // transform: rotate(180deg); /* 可选，使文字从上到下，从左到右 */
        margin-right: 40px;
      }
      img{
        width: 48px;
        height: 48px;
        margin-right: 40px;
      }
    }
  }
}
@keyframes floating {
  0% { transform: translateY(0); }
  25% { transform: translateY(-30px); }
  50% { transform: translateY(30px); }
  75% { transform: translateY(-30px); }
  100% { transform: translateY(0px); }
  }
</style>